<template>
    <div class="operation-bar">

        <div v-if="needTitle" class=" fs-5 ms-2 d-flex justify-content-between">
            <div  class="sgp-main-title">{{title}}</div>
            <slot name="add">
                
            </slot>
        </div>
        <div  class="w-100 ms-2">
            <slot name="select">
                
            </slot>
         
        </div>

        <div v-if="needClick" class="w-100 ms-2">
            <slot name="click">

            </slot>
        </div>

    </div>
</template>
    
<script setup lang='ts'>

const props = defineProps({
    
    title: {
        type: String,
        default: "项目管理"
    },

    needTitle: {
        type: Boolean,
        default: true
    },

    needSelect: {
        type: Boolean,
        default: true
    },
    needAdd: {
        type: Boolean,
        default: true
    },
    needClick: {
        type: Boolean,
        default: true
    }
})

</script>
    
<style scoped>
.operation-bar {
    width: calc(100% - 50px);
    left: 25px;
    top: 25px;
    margin-top: 10px;
    background-color: white;
    border-radius: 12px;



    
}
.sgp-main-title {
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 10px;
    float: left;
    width: 350px;
    height: 28px;
    font-size: 23px;
    font-family: PingFang SC-Heavy,PingFang SC;
    font-weight: 800;
    color: #353535;
    line-height: 23px;
    -webkit-background-clip: text;
}
</style>